<template>
  <section class="page-container">
    <el-form
      label-width="180px"
      :model="editParams"
      class="normal"
    >
      <form-item
        :model-keys.sync="editParams"
        :form-items="formList"
        :columns="2"
      />
    </el-form>

    <section class="options-wrap">
      <el-button
        type="primary"
        @click="onSubmit"
      >
        提交
      </el-button>
      <el-button @click="onReset">重置</el-button>
    </section>
  </section>
</template>
<script>
  export default {
    name: 'advanced-form',
    data() {
      return {
        editParams: {
          name: '耗子',
          age: 12,
          sex: 1, // 1：男  2：女
          sex2: 1, // 1：男  2：女
          level: [], // 1：低  2：中  3：高
          level3: [],
          levelValue0: true,
          levelValue1: false,
          startTime: '',
          endTime: '',
          alarmTime: null,
          startDate: '',
          endDate: '',
          switchVal: '',
          jibie: [3, 6],
          cascaderValue: [],
          color: '#211D1D',
          inputNumberValue: 150,
          timeSelectValue: '',
        },
        formList: [
          {
            _type: 'input', // 表单元素类型
            _model: 'name', // 表单元素中 v-model 对应的值
            label: '报警时间:', // 表单元素 el-form-item 中label的值
            placeholder: '请输入报警时间',
          },
          {
            _type: 'input',
            _model: 'age',
            label: '工单状态:',
            placeholder: '请输入年龄',
          },
          {
            _type: 'select',
            _model: 'sex',
            _options: [
              {
                label: '男',
                value: 1,
              },
              {
                label: '女',
                value: 2,
              }
            ],
            label: '性别:',
            placeholder: '请选择性别',
          },
          {
            _type: 'radioButton',
            _model: 'sex2',
            _options: [
              {
                label: '男',
                value: 1,
              },
              {
                label: '女',
                value: 2,
              }
            ],
            label: '性别2:',
          },
          {
            _type: 'select',
            _model: 'level',
            _options: [
              {
                label: '低',
                value: 1,
              },
              {
                label: '中',
                value: 2,
              },
              {
                label: '高',
                value: 3,
              }
            ],
            label: '报警等级:',
            placeholder: '请选择报警等级',
            multiple: true,
            collapseTags: true,
          },
          {
            _type: 'checkbox',
            _model: 'levelValue',
            _options: [
              {
                label: '低',
                value: 1,
              },
              {
                label: '中',
                value: 2,
              },
              {
                label: '高',
                value: 3,
              }
            ],
            label: '报警等级2:',
          },
          {
            _type: 'checkboxButton',
            _model: 'level3',
            _options: [
              {
                label: '低',
                value: 1,
              },
              {
                label: '中',
                value: 2,
              },
              {
                label: '高',
                value: 3,
              }
            ],
            label: '报警等级3:',
          },
          {
            _type: 'timePicker',
            _model: 'alarmTime',
            label: '报警时间:',
            'is-range': true,
            'start-placeholder': '开始时间',
            'end-placeholder': '结束时间',
            'value-format': 'HH:mm:ss',
          },
          {
            _type: 'datePicker',
            _model: 'startDate',
            label: '报警开始日期:',
            placeholder: '请选择报警开始日期',
            'value-format': 'timestamp',
          },
          {
            _type: 'datePicker',
            _model: 'endDate',
            label: '报警结束日期:',
            placeholder: '请选择报警结束日期',
            'value-format': 'timestamp',
          },
          {
            _type: 'dateTimePicker',
            _model: 'startTime',
            label: '报警开始时间:',
            placeholder: '请选择报警开始时间',
            'value-format': 'timestamp',
          },
          {
            _type: 'dateTimePicker',
            _model: 'endTime',
            label: '报警结束时间:',
            placeholder: '请选择报警结束时间',
            'value-format': 'timestamp',
          },
          {
            _type: 'switch',
            _model: 'switchVal',
            label: '告警开关:',
            'active-color': '#13ce66',
            'inactive-color': '#ff4949',
            'active-text': '开启',
            'inactive-text': '关闭',
          },
          {
            _type: 'slider',
            _model: 'jibie',
            label: '级别:',
            range: true,
            max: 10,
          },
          {
            _type: 'colorPicker',
            _model: 'color',
            label: '颜色选择:',
          },
          {
            _type: 'inputNumber',
            _model: 'inputNumberValue',
            label: '计数器:',
            min: 100,
            max: 300,
          },
          {
            _type: 'timeSelect',
            _model: 'timeSelectValue',
            label: '时间选择:',
            placeholder: '请选择时间',
          },
          {
            _type: 'cascader',
            _model: 'cascaderValue',
            _options: [
              {
                value: 1,
                label: 'Asia',
                children: [
                  {
                    value: 2,
                    label: 'China',
                    children: [
                      { value: 3, label: 'Beijing' },
                      { value: 4, label: 'Shanghai' },
                      { value: 5, label: 'Hangzhou' }
                    ],
                  },
                  {
                    value: 6,
                    label: 'Japan',
                    children: [
                      { value: 7, label: 'Tokyo' },
                      { value: 8, label: 'Osaka' },
                      { value: 9, label: 'Kyoto' }
                    ],
                  },
                  {
                    value: 10,
                    label: 'Korea',
                    children: [
                      { value: 11, label: 'Seoul' },
                      { value: 12, label: 'Busan' },
                      { value: 13, label: 'Taegu' }
                    ],
                  }
                ],
              },
              {
                value: 14,
                label: 'Europe',
                children: [
                  {
                    value: 15,
                    label: 'France',
                    children: [
                      { value: 16, label: 'Paris' },
                      { value: 17, label: 'Marseille' },
                      { value: 18, label: 'Lyon' }
                    ],
                  },
                  {
                    value: 19,
                    label: 'UK',
                    children: [
                      { value: 20, label: 'London' },
                      { value: 21, label: 'Birmingham' },
                      { value: 22, label: 'Manchester' }
                    ],
                  }
                ],
              },
              {
                value: 23,
                label: 'North America',
                children: [
                  {
                    value: 24,
                    label: 'US',
                    children: [
                      { value: 25, label: 'New York' },
                      { value: 26, label: 'Los Angeles' },
                      { value: 27, label: 'Washington' }
                    ],
                  },
                  {
                    value: 28,
                    label: 'Canada',
                    children: [
                      { value: 29, label: 'Toronto' },
                      { value: 30, label: 'Montreal' },
                      { value: 31, label: 'Ottawa' }
                    ],
                  }
                ],
              }
            ],
            label: '级联多选:',
            'collapse-tags': true,
            clearable: true,
            props: {
              multiple: true,
              emitPath: false,
            },
          }
        ],
      };
    },
    methods: {
      onSubmit() {
        this.$message.success(`success submit:${JSON.stringify(this.editParams)}`);
      },
      onReset() {
        this.editParams = this.$options.data().editParams;
      },
    },
  };
</script>
<style lang="scss" scoped>
.page-container {
  box-sizing: border-box;
  padding-bottom: 50px;

  .options-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 6;
    box-sizing: border-box;
    width: 100%;
    padding-left: $--side-bar-width;
    line-height: 50px;
    text-align: center;
    background-color: $--color-white;
    box-shadow: 4px 0 4px 2px $--color-grey-base;
  }
}
</style>
